<template>
	<view style="padding-top: 20rpx;padding-bottom: 30rpx;">
		<view class="box" v-for="(item, index) in indexData" :key="index">
			<view style="display: flex;align-items: center;">
				<view style="font-size: 32rpx;">你提交的反馈</view>
				<view v-if="item.receipt" class="success">已回复</view>
				<view v-if="!item.receipt" class="err">暂未回复</view>
			</view>
			<view v-if="item.image != []">
				<view v-for="(itm, idx) in item.images" :key="idx" class="image">
					<image :src="imgUrl + itm"></image>
				</view>
			</view>
			<!-- 创建得时间 -->
			<view style="font-size: 28rpx;color: #999;margin-top: 20rpx;">
				{{ getTime(item.createtime) }}
			</view>
			<!-- 反馈回复 -->
			<view style="display: flex;font-size: 28rpx;color: #999;margin-top: 40rpx;">
				<view>反馈回复：</view>
				<view style="margin-left: 196rpx;" v-if="item.receipt">{{ getTime(item.updatetime) }}</view>
				<view style="margin-left: 196rpx;" v-if="!item.receipt">您的反馈暂无回复</view>
			</view>
			<view style="display: flex;font-size: 28rpx;color: #999;margin-top: 40rpx;">
				{{ item.receipt ? item.receipt : '暂未回复' }}
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			imgUrl: this.$DOMAIN_URL,
			indexData: [],

			styleObj: {
				backgroundColor: '#bfa'
			},
			styleObj1: {
				backgroundColor: 'yellow'
			}
		};
	},
	methods: {
		getData() {
			this.$http.get('wanlshop/feedback/lists').then(res => {
				console.log(res.data.data);
				this.indexData = res.data.data;
			});
		},
		getTime(datenum) {
			console.log(datenum, 666666);
			let date = new Date(datenum * 1000);
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			let h = date.getHours();
			let mm = date.getMinutes();
			let mmm = date.getSeconds();
			return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + mmm;
		}
	},

	onLoad() {
		this.getData();
	}
};
</script>

<style lang="scss">
page {
	background: #f5f7f9;
}
.box {
	width: 690rpx;

	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 auto;
	padding-top: 30rpx;
	padding-left: 30rpx;
	margin-bottom: 20rpx;
	padding-bottom: 30rpx;
}
.success {
	background: rgba(68, 156, 32, 0.2);
	color: #449c20;
	width: 84rpx;
	height: 34rpx;
	line-height: 34rpx;
	font-size: 24rpx;
	text-align: center;
	display: flex;
	justify-content: center;
	align-content: center;
	margin-left: 28rpx;
}
.err {
	background: rgba(255, 193, 0, 0.2);
	color: #ffc100;
	width: 120rpx;
	height: 34rpx;
	line-height: 34rpx;
	font-size: 24rpx;
	text-align: center;
	display: flex;
	justify-content: center;
	align-content: center;
	margin-left: 28rpx;
}
.image {
	image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
}
</style>
